<template>
  <div class="about-page">
    <el-card class="about-card">
      <template #header>
        <div class="card-header">
          <h2>关于系统</h2>
        </div>
      </template>

      <div class="about-content">
        <!-- 系统信息 -->
        <div class="section">
          <h3>系统信息</h3>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="系统名称">文档管理系统</el-descriptions-item>
            <el-descriptions-item label="版本号">v1.0.0</el-descriptions-item>
            <el-descriptions-item label="发布日期">2024-03-09</el-descriptions-item>
            <el-descriptions-item label="技术栈">
              Vue 3 + Element Plus + Django
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 功能特点 -->
        <div class="section">
          <h3>功能特点</h3>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-card class="feature-card" shadow="hover">
                <template #header>
                  <div class="feature-header">
                    <el-icon :size="24"><Document /></el-icon>
                    <span>文档管理</span>
                  </div>
                </template>
                <div class="feature-content">
                  支持多种格式文档的上传、预览、下载和分享
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="feature-card" shadow="hover">
                <template #header>
                  <div class="feature-header">
                    <el-icon :size="24"><Share /></el-icon>
                    <span>协作分享</span>
                  </div>
                </template>
                <div class="feature-content">
                  便捷的文档分享和协作功能，支持权限管理
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card class="feature-card" shadow="hover">
                <template #header>
                  <div class="feature-header">
                    <el-icon :size="24"><Search /></el-icon>
                    <span>智能搜索</span>
                  </div>
                </template>
                <div class="feature-content">
                  强大的文档搜索功能，支持多维度检索
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <!-- 联系我们 -->
        <div class="section">
          <h3>联系我们</h3>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-card class="contact-card" shadow="hover">
                <template #header>
                  <div class="contact-header">
                    <el-icon><Message /></el-icon>
                    <span>技术支持</span>
                  </div>
                </template>
                <div class="contact-content">
                  <p>邮箱：support@example.com</p>
                  <p>电话：400-123-4567</p>
                </div>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card class="contact-card" shadow="hover">
                <template #header>
                  <div class="contact-header">
                    <el-icon><Service /></el-icon>
                    <span>商务合作</span>
                  </div>
                </template>
                <div class="contact-content">
                  <p>邮箱：business@example.com</p>
                  <p>电话：400-123-4568</p>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import {
  Document,
  Share,
  Search,
  Message,
  Service
} from '@element-plus/icons-vue'
</script>

<style scoped>
.about-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.about-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h2 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.section {
  margin-bottom: 40px;
}

.section h3 {
  margin: 0 0 20px;
  font-size: 16px;
  color: #303133;
  font-weight: 600;
}

.feature-card,
.contact-card {
  height: 100%;
}

.feature-header,
.contact-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
}

.feature-content,
.contact-content {
  color: #606266;
  line-height: 1.6;
}

.contact-content p {
  margin: 8px 0;
}

.el-descriptions {
  margin-bottom: 20px;
}

:deep(.el-descriptions__label) {
  width: 120px;
}
</style> 